<template>
    <div class="root-div">
        <el-row :gutter="10">
            <div class="" style="height: 150px;">
                <div class="title-box">
                    <div class="header-title">智能看板网页前端系统</div>
                    <div class="header-img" style="height: 120px ;">
                        <!-- 展示日期和时间 -->
                        <div class="time-box" style="margin-top: 30px; margin-bottom: auto; float: right;
               margin-right: 50px; display: flex;">
                            <div class="time" style="font-size: xx-large; 
                font-family: 'DS-DIGIB'; margin-top: 10px; margin-right: 40px;">
                                {{ currentTime }}
                            </div>

                            <div class="date">
                                <div class="date-weekInfo" style="float: right;">
                                    {{ getCurrentWeekday() }}
                                </div>
                                <div class="date-dayInfo" style="clear: both;">
                                    {{ getCurrentDay() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 响应式可视化图表  左 中 右 在24grid下的比例是 1:2:1 -->
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <div class="chartBox">
                    <LanguageCharts></LanguageCharts>
                </div>
                <div class="chartBox">
                    <SchoolDegree></SchoolDegree>
                </div>
                <div class="chartBox">
                    <JobCityCount></JobCityCount>
                </div>

            </el-col>
            <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
                <div style="height: 100px;">
                    <div class="banner-data-box ">
                        <table class="data-table">
                            <tr>
                                <td>{{ this.bannerData.count }}</td>
                                <td>{{ this.bannerData.city_count }}</td>
                                <td>{{ this.bannerData.average }}</td>
                            </tr>
                            <tr>
                                <th>岗位数量/个</th>
                                <th>城市数量/个</th>
                                <th>平均薪资/元</th>
                            </tr>
                        </table>
                    </div>
                </div>
                <div class="chartBox" style="border: 0cap;">
                    <Map></Map>
                </div>
            </el-col>
            <el-col :xs="6" :sm="6" :md="6" :lg="6" :xl="6">
                <div class="chartBox">
                    <JobWordCloud></JobWordCloud>
                </div>
                <div class="chartBox">
                    <FlowerChart></FlowerChart>
                </div>
                <div class="chartBox">
                    <ScrollViewChart></ScrollViewChart>
                </div>
            </el-col>
        </el-row>
    </div>
</template>
  
<script>
import Map from '@/components/Map.vue'
import SchoolDegree from '@/components/charts/SchoolDegree.vue'
import LanguageCharts from '@/components/charts/LanguageCharts.vue'
import FlowerChart from '@/components/charts/FlowerChart.vue'
import JobCityCount from '@/components/charts/JobCityCount.vue'
import JobWordCloud from '@/components/charts/JobWordCloud.vue'
import ScrollViewChart from '@/components/charts/ScrollViewChart.vue'
import { getBannerData } from '@/api/base'

export default {
    // name: 'App',
    components: {
        Map,
        SchoolDegree,
        LanguageCharts,
        FlowerChart,
        JobCityCount,
        JobWordCloud,
        ScrollViewChart
    },
    data() {
        return {
            currentTime: '',
            bannerData: '',
            // Banner相关数据

        }
    },
    mounted() {
        this.updateClock();
        this.getBannerData();
    },
    methods: {
        getBannerData() {
            console.log("获取banner数据")

            getBannerData().then(res => {
                this.bannerData = res.data
                console.log(this.bannerData)
            })
        },
        updateClock() {
            setInterval(() => {
                const now = new Date();
                const hours = now.getHours();
                const minutes = now.getMinutes();
                const seconds = now.getSeconds();
                this.currentTime = `${hours}:${minutes}:${seconds}`;

                // console.log("时间更新:    " + `${hours}:${minutes}:${seconds}`)
            }, 1000);
        },
        getCurrentDay() {
            const now = new Date();
            const year = now.getFullYear();
            const month = now.getMonth() + 1;
            const day = now.getDate();

            return `${year} 年 ${month} 月 ${day} 日  `;
        },
        getCurrentWeekday() {
            const now = new Date();
            const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            const weekdayIndex = now.getDay();
            return weekdays[weekdayIndex];
        }
    }
}
</script>
  
<style scoped>
.banner-data-box {
    border-radius: 4px;
    /* max-height: 360px; */
    border: 1px solid rgb(197, 199, 201);
}

.chartBox {
    /* height: 360px; */
    height: 240px;
    margin-bottom: 20px;
    border-radius: 4px;
    /* max-height: 360px; */
    border: 2px solid rgb(231, 237, 243);
    /* 设置边框样式 */

    transition: border-color 0.3s ease;
    /* 添加过渡效果 */
}

@media screen and (min-width: 2160px) {
    .chartBox {
        height: 340px;
    }
}

.chartBox:hover {
    border-color: #ffc1ff;
    /* 鼠标悬停时的边框颜色 */

    /* color: #00ffcc;
    text-shadow: 0 0 10px #00ffcc, 0 0 20px #00ffcc, 0 0 30px #00ffcc; */
}



.el-col {
    border-radius: 4px;
}

.header-img {
    height: 100%;
    background: url("../assets/head.gif") no-repeat center center;
    background-size: 100%;
    height: 100%;
    width: 100%;
    position: absolute;
    top: .4rem;
}

.header-title {
    text-align: center;
    color: #ffffff;
    font-size: 2.4rem;
    text-shadow: 0 0 1 .3rem #00d8ff;
    line-height: 2.05rem;
    margin-bottom: 60px;
}



.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th,
.data-table td {
    padding: 8px;
    text-align: center;
    /* border: 1px solid rgb(197, 199, 201); */
}

.data-table th {
    /* background-color: #f2f2f2; */
}

.data-table td {
    /* 数字 字体&大小 */
    font-family: 'DS-DIGIB';
    font-size: 90px;
    color: rgb(234, 234, 157);
}
</style>
  
  